{% block sw_product_variants_configurator_prices %}
<div class="sw-product-variants-configurator-prices">
    <mt-banner
        class="sw-product-variants-configurator-prices__alert"
        variant="info"
    >
        {{ $tc('sw-product.variations.configuratorModal.surchargeNotice') }}
    </mt-banner>
    <div class="sw-product-variants-configurator-prices__table">
        {% block sw_product_variants_configurator_prices_groups %}
        <div class="sw-product-variants-configurator-prices__groups">
            <ul>
                <li
                    v-for="group in selectedGroups"
                    :key="group.id"
                    class="sw-product-variants-configurator-prices__groupElement"
                    :class="{'is--selected': activeGroup.id == group.id}"
                    role="button"
                    tabindex="0"
                    @click="activeGroup = group"
                    @keydown.enter="activeGroup = group"
                >
                    <mt-icon
                        name="regular-folder"
                        size="16px"
                    />
                    {{ group.translated.name }}
                </li>
            </ul>
        </div>
        {% endblock %}

        {% block sw_product_variants_configurator_prices_prices %}
        <div class="sw-product-variants-configurator-prices__prices">
            {% block sw_product_variants_configurator_prices_search %}
            <div class="sw-product-variants-configurator-prices__search">
                {% block sw_product_variants_configurator_prices_search_field %}
                <sw-simple-search-field
                    v-model:value="term"
                    size="small"
                    variant="form"
                    :placeholder="$tc('sw-product.variations.configuratorModal.searchPlaceholder')"
                />
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_product_variants_configurator_prices_grid_wrapper %}
            <div class="sw-product-variants-configurator-prices__grid-wrapper">
                {% block sw_product_variants_configurator_prices_data_grid %}
                <sw-data-grid
                    v-if="optionsForGroup.length"
                    :data-source="optionsForGroup"
                    :show-selection="false"
                    :columns="optionColumns"
                    show-settings
                    full-page
                >

                    {% block sw_product_variants_configurator_prices_column_name %}
                    <template
                        #column-name="{ item, isInlineEdit, compact }"
                    >
                        {{ item.option.translated.name }}
                    </template>
                    {% endblock %}

                    {% block sw_product_variants_configurator_prices_column_currency %}
                    <template
                        v-for="currency in currenciesList"
                        :key="currency.id"
                        #[`column-currency.${currency.id}`]="{ item, isInlineEdit, compact }"
                    >

                        <sw-product-variants-price-field
                            :price="getCurrencyOfOption(item, currency.id)"
                            :tax-rate="product.taxId"
                            :currency="currency"
                            compact
                        />
                    </template>
                    {% endblock %}

                    {% block sw_product_variants_configurator_prices_actions %}
                    <template
                        #actions="{ item }"
                    >
                        {% block sw_product_variants_configurator_prices_actions_items %}
                        <sw-context-menu-item
                            variant="danger"
                            @click="resetSurcharges(item, true)"
                        >
                            {{ $tc('sw-product.variations.configuratorModal.resetSurcharges') }}
                        </sw-context-menu-item>
                        {% endblock %}
                    </template>
                    {% endblock %}
                </sw-data-grid>
                {% endblock %}
            </div>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
    {% block sw_product_variants_configurator_prices_loader %}
    <sw-loader v-if="isLoading" />
    {% endblock %}

</div>
{% endblock %}
